<template>
<div class="content">
    <!--key 是唯一的属性值 有id 挂上id 没有id 挂index  有key会跟随dom更新， 无key 就地更新 固定到当dom中-->
    <div class="vcode" v-for="(item,index) in brand" :key="item.id" >

        <input type="checkbox"> 
        <text class="title">{{item.name}}</text>
        <text class="title">{{item.price}}</text>
        <button class='btn' @click="remove(index)">删除</button>
    </div>
</div>

</template>
<script setup>
import { ref } from 'vue';

let brand = ref([
                { id: 101, name: '奔驰', price: '13.8' },
                { id: 102, name: '宝马3', price: '15.8' },
                { id: 103, name: '奥迪A3', price: '12.8' },
                { id: 104, name: '林肯', price: '23.8' },
                { id: 105, name: '玛莎', price: '9.8' },])

const remove = (index) => { 
    brand.value.splice(index, 1)
 }

// export default {
//     data() { 
//         return {
//             /*
//                 回顾：
//                     1、文本插值 {{ 接收的是 data 里面的属性}}
//                     2、指令： v-bind v-on : @
//                     3、 如果要解决包含html标签： v-html  只读取文本信息 v-text
//                     4、v-show 显示隐藏 会删除dom元素吗？ 不会 v-if 判断显示 会删除dom元素
//                     5、v-for 循环 循环数组 循环对象
//                     6、vue里面设计模式：mvvm  v-model 双向数据绑定
            
//             */
//            // v-for 有key 和无key的区别 是什么
//             brand: [
//                 { id: 101, name: '奔驰', price: '13.8' },
//                 { id: 102, name: '宝马3', price: '15.8' },
//                 { id: 103, name: '奥迪A3', price: '12.8' },
//                 { id: 104, name: '林肯', price: '23.8' },
//                 { id: 105, name: '玛莎', price: '9.8' },
                
//             ]
//         }
//     },
//     methods: {
//         remove(index) { 
//             console.log(index);
//             this.brand.splice(index,1)
//         }
//     }
// }


</script>
<style scoped>
.content{
    width: 600px;
    padding: 20px;
    border: 1px solid #ccc;
    .vcode{
        padding: 10px 0;
        border-bottom: 1px solid rgb(56, 54, 54);
        .title{
            font-size: 18px;
            padding-left: 20px;
        }
        .btn{
            margin-left: 20px;
            color: rgb(75, 2, 2);
            background-color: red;
        }
    }

}


</style>